<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab选项卡功能</title>
</head>

<body>
    <ul>
        <li>石头</li>
        <li>水果</li>
        <li>玫瑰</li>
        <li>房屋</li>
    </ul>
    <div>
        <img src="./img/2024-08-14-04-40-00-576x384.jpg" alt="">
        <img src="./img/2024-09-03-04-28-57-576x384.jpg" alt="">
        <img src="./img/2024-09-03-04-29-29-576x384.jpg" alt="">
        <img src="./img/2024-09-05-06-43-23-576x384.jpg" alt="">
    </div>
    <script>
        // let li = document.getElementsByTagName("li")
        // let img = document.getElementsByTagName("img")
        // for (let i = 0; i < li.length; i++) {
        //     // 解释
        //     li[i].index = i

        //     li[i].onmouseover = function () {

        //         this.style.backgroundColor = "red"
        //         console.log(this.index);

        //         // 其余元素消失
        //         for (let j = 0; j < img.length; j++) {
        //             img[j].style.display = "none"
        //         }
        //         // 目标元素出现
        //         img[this.index].style.display = "block"
        //     }


        //     li[i].onmouseout = function () {
        //         li[i].style.backgroundColor = "white"
        //     }
        // }

        let li = document.getElementsByTagName('li')
        let img = document.getElementsByTagName('img')

        for (let i = 0; i < li.length; i++) {


            li[i].index = i



            li[i].onmouseover = function name(params) {
                for (let j = 0; j < img.length; j++) {
                    img[j].style.display = 'none'
                }

                img[this.index].style.display = 'block'
            }

            li[i].onmouseout = function () {
                li[i].style.backgroundColor = 'white'
            }
        }

    </script>
</body>

</html>